*{
	margin: 0px;
	padding: 0px;	
}
li{
	list-style: none;
}
.box{
	width: 1000px;
	height: 500px;
	position: relative;;
	
	margin: 30px auto;

}
.box .son{
	width: 800px;
	height: 500px;
	position: absolute;
	right: 0px;
	top:0px;
	background: #167ED9;

}
.box .dot{
	width: 180px;
	height: 20px;
	position: absolute;
	bottom: 20px;
	right: 20px;
	

}
.box .dot .dotson{
	width:20px;
	height: 20px;
	background: #E63737;
	border-radius: 50%;
	float: left;
	margin: 0 5px;
	font-size: 50;
	font-weight: bold;
	cursor: pointer;

}
.box .left{
	width: 20px;
	height: 50px;
	position: absolute;
	left: 200px;
	top: 225px;
	background: red;
}
.box .right{
	width: 20px;
	height: 50px;
	position: absolute;
	right: 0px;
	top: 225px;
	background:#272822 ;
}
.box .menubro{
	width: 200px;
	height: 500px;
	position: absolute;
	left: 0px;
	top: 0px;
	background: #272822;
	opacity: 0.5;
}
.box .menu{
	width: 200px;
	height: 490px;
	position: absolute;
	padding-top:10px;
}
.box .menu .menuList{
	width: 200px;
	height: 48px;	
}
.box .menu .menuList:hover{
	background: #fff;
}

.box .menu .menuList .more{
	height: 500px;
	width: 500px;
	background: #fff;
	display: none;
	position: absolute;
	top: 0px;
	left: 200px;
	z-index: 99;
}
